<template>
  <div ref="chartContainer" style="width: 100%; height: 330px"></div>
</template>

<script>
import { ref, watch, onMounted } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'KLineChart',
  props: {
    kLineData: {
      type: Array,
      required: true
    },
    categoryData: {
      type: Array,
      required: true
    },
    name: {
      type: String
    }
  },
  setup(props) {
    const chartContainer = ref(null)
    let chart

    const initChart = () => {
      if (chartContainer.value) {
        // 初始化 ECharts 图表
        if (!chart) {
          chart = echarts.init(chartContainer.value)
        }

        // 配置图表选项
        const options = {
          title: {
            text: props.name
          },
          xAxis: {
            type: 'category',
            data: props.categoryData
          },
          yAxis: {
            scale: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: function (params) {
              let tooltipText = ''
              params.forEach(function (item) {
                // 自定义提示框内容，只显示 lowest 和 highest 信息，并将其标签改为中文
                tooltipText +=
                  item.seriesName +
                  '<br/>' +
                  '最低: ' +
                  item.data[1] +
                  '<br/>' +
                  '最高: ' +
                  item.data[2] +
                  '<br/>'
              })
              return tooltipText
            }
          },
          series: [
            {
              name: '统计',
              type: 'candlestick',
              data: props.kLineData
            }
          ]
        }

        // 设置图表选项
        chart.setOption(options)
      }
    }

    onMounted(() => {
      initChart() // 组件挂载后初始化图表
    })

    // 监听 props 的变化以更新图表
    watch(
      () => [props.kLineData, props.categoryData],
      () => {
        initChart() // 重新绘制图表
      },
      { deep: true } // 深度监听以处理数组内容更改
    )

    return {
      chartContainer
    }
  }
}
</script>

<style scoped>
/* 可添加必要的样式 */
</style>
